<template>
	<view class="list">
		<view class="list_item" v-for="item in 10 " @click="gotoDetail">
			<image src="../../static/img/banner2.jpeg" mode=""></image>
			<view class="list_item_text">
				<view class="list_item_header">
					<view class="list_item_text_tag">
						标签
					</view>
					<view class="list_item_text_title ellipsis">
						标题随便写点啥子阿萨大大十大高手就是发货及时发
					</view>
				</view>
				<view class="list_item_bottom">
					<view class="list_item_bottom_newnum">
						$6.66
					</view>
					<view class="list_item_bottom_num">
						8.88
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const actionsClick = () => {}
	const gotoDetail=()=>{
		uni.navigateTo({
			url: '/pages/details/details'
		});
	}
</script>

<style lang="scss" scoped>
	.ellipsis {
		display: -webkit-box;
		/* 使用 Flexbox */
		-webkit-box-orient: vertical;
		/* 设置为垂直方向 */
		-webkit-line-clamp: 1;
		/* 限制显示的行数为 2 */
		overflow: hidden;
		/* 隐藏超出部分 */
		text-overflow: ellipsis;
		/* 使用省略号表示超出部分 */
		line-height: 1.5;
		/* 行高设置 */
		max-height: 1.5em;
		/* 限制最大高度，2行 */
	}
	.list{
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		overflow-y: auto;
	}

	.list_item {
		background: #ffff;
		border-radius: 10px;
		padding: 10px;
		display: flex;
		align-items: center;

		&>image {
			width: 150rpx;
			height: 150rpx;
			object-fit: cover;
			border-radius: 10px;
			flex: none;
		}

		.list_item_text {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 150rpx;

			.list_item_header {
				display: flex;

				.list_item_text_tag {
					border-radius: 8px;
					background: pink;
					font-size: 14px;
					padding: 2px 4px;
					margin-right: 8px;
					flex: none;
				}

				.list_item_text_title {
					flex: 1;
					font-size: 16px;
					font-family: 600;
				}
			}

			.list_item_bottom {
				display: flex;
				align-items: baseline;
				.list_item_bottom_newnum {
					font-size: 24px;
					color: pink;
					font-family: 700;
				}

				.list_item_bottom_num {
					font-size: 14px;
					margin-left: 20rpx;
					text-decoration: line-through;
				}
			}
		}

	}
</style>